<template>
    <div>
        <h2>{{title}}</h2>
        <div>
            <h3>三国演义</h3>
            <p>价格:{{price}}</p>
            <p>数量:</p><input type="number" v-model="num">
            <p>总价:{{total}}</p>
        </div>
    </div>
  </template>
  
  <!-- 
     1. 点击确定按钮，获取输入框内容，添加到列表
  -->
  <script>
    export default {
        data() {
            return {
                title:'计算属性和侦听器',
                price:28.88,
                num:1,
            }
        },
        computed:{
            total(){
               return this.price * this.num
            }
        }
       
    }
  </script>
  
  <style lang="css" scoped>
  
  </style>